<template>
  <div class="top">
    <HomeHeader>
      <span class="iconfont icon-ziyuan"></span>
    </HomeHeader>

    <HomeLogo />

    <HomeNav />
  </div>

  <div class="content">
    <RouterView />
    <!-- <HomeList /> -->
    <!-- <keep-alive>
      <RouterView />
    </keep-alive> -->

    <!-- 用缓存组件 -->
    <!-- <router-view v-slot="{ Component }">
      <keep-alive v-if="$route.meta.isKeepAlive">
        <component :is="Component" />
      </keep-alive>
      <component :is="Component" v-if="!$route.meta.isKeepAlive" />
    </router-view> -->

    <!-- <router-view v-slot="{ Component }">
      <keep-alive>
        <component :is="Component" />
      </keep-alive>
    </router-view> -->

    <!-- <router-view v-slot="{ Component }">
      <transition name="fade">
        <component :is="Component" />
      </transition>
    </router-view> -->
  </div>
</template>

<script>
import HomeHeader from "./components/HomeHeader.vue";
import HomeLogo from "./components/HomeLogo.vue";
import HomeNav from "./components/HomeNav.vue";
// import HomeList from "./components/HomeList.vue";
export default {
  components: {
    HomeHeader,
    HomeLogo,
    HomeNav,
    // HomeList,
  },
  // watch: {
  //   $route(to) {
  //     console.log(to);
  //   },
  // },
};
</script>

<style lang="less" scoped>
.top {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

.content {
  position: fixed;
  top: 156px;
  left: 0;
  right: 0;
  bottom: 50px;
  // overflow: auto;
}

.iconfont {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 20px;
  font-size: @xxl-font;
}

.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s ease;
}

.fade-enter-from {
  transform: translateX(100%);
  opacity: 0;
}
.fade-leave-to {
  transform: translateX(100%);
  opacity: 0;
}
</style>
